<template>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="expand">
        <template #default="props">
          <div m="4">
            <p m="t-0 b-2">State: {{ props.row.state }}</p>
            <p m="t-0 b-2">City: {{ props.row.city }}</p>
            <p m="t-0 b-2">Address: {{ props.row.address }}</p>
            <p m="t-0 b-2">Zip: {{ props.row.zip }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="goodsSn" align="center" label="商品ID"/>
      <el-table-column prop="name" label="名称" align="center"/>
      <el-table-column label="图片" align="center"  >
        <template #default="scope">
         <el-image style="width: 70px; height: 70px" :src="scope.row.picUrl"></el-image>
      </template>
      </el-table-column>
      <el-table-column prop="" label="分享图" align="center">
      
      </el-table-column>
      <el-table-column prop="" label="详情" align="center">
      <template #default="scope">
        <el-button type="primary" style="width: 56px; height: 28px">查看</el-button>
      </template>
      </el-table-column>
  
      <el-table-column prop="counterPrice" label="市场售价" align="center" />
      <el-table-column prop="retailPrice" label="当前价格" align="center" />
      <el-table-column prop="isNew" label="是否新品" align="center">
        <template #default="scope">
          <el-tag
            :type="scope.row.tag === isNew ? '' : 'success'"
            disable-transitions
            >非新品</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="isHot" label="是否热品" align="center">
        <template #default="scope">
          <el-tag
            :type="scope.row.tag === isHot ? '' : 'success'"
            disable-transitions
            >非热品</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="isOnSale" label="是否在售" align="center">
        <template #default="scope">
          <el-tag
            :type="scope.row.tag === isOnSale ? 'success' : '' "
            disable-transitions
            >在售</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="keywords" label="操作" align="center" width="180">
        <template #default="scope">
        <el-button type="primary" style="width: 56px; height: 28px">编辑</el-button>
        <el-button type="danger" style="width: 56px; height: 28px">删除</el-button>
      </template>
      </el-table-column>
    </el-table>
  </template>
  
  <script setup>
  import {onMounted, reactive,ref} from 'vue'
  import { shopList } from '@/api/api.js'
  import { toReactive } from '@vueuse/shared';
  let tableData = reactive([])
  onMounted(() => {
    shopList().then(res=>{
      console.log(res.data.data.list,22222);
      tableData.push(...res.data.data.list)
      console.log(tableData,33333);
    })
  })
  
  
  </script>
  
  <style>
  
  </style>